<template>
  <div>
    <Modal
      :value="editModal"
      draggable
      scrollable
      title="选择目录"
      class="fileCatalogModal"
      @on-cancel = "cancel"
      :width="900"
    >
      <!-- <CButtonClose slot="close" @click="menuCancel" /> -->

      <div class="demo-split">
        <Split v-model="split1">
          <div slot="left" class="demo-split-pane">
            <ul :id="ztreeId" class="ztree"></ul>
          </div>
          <div slot="right" class="demo-split-pane-right">
            <span class="selectNumberClass"
              >已选择的数据 {{ resultDataTotal }} 个</span
            >
            <Table
              border
              :columns="getColumn"
              :data="resultData"
              class="resultTableStyle"
            >
              <template slot="action" slot-scope="{ row, index }">
                <CButton
                  v-c-tooltip="'删除'"
                  title="删除"
                  variant="outline"
                  color="info"
                  size="sm"
                  @click="deletePath"
                >
                  <CIcon name="cil-x-circle" />
                </CButton>
              </template>
            </Table>
          </div>
        </Split>
      </div>
          <template #footer>
        <div style="display: flex; width: 100%">
          <div style="width: 50%; display: flex; align-items: center">
            <!-- <div>
              <CInputCheckbox
                label="任务拆分"
                type="radio"
                title="'是否将任务拆分成多个任务'"
                :checked.sync="isBatch"
                value="是否批量"
              />
            </div>  55%-->

            <CInput
              label="筛选:"
              placeholder="关键字"
              style="margin: 0 10px 0 0"
              horizontal
              v-model="filterName"
              :title="filterName"
              maxlength="100"
            />
            <div style="width: 40%">
              <CSelect
                label="类型:"
                horizontal
                :options="suffixOptions"
                style="margin: 0 0 0 0"
                :value.sync="currentSelectSuffix"
                @change="suffixSearch()"
                class="selectSuffix"
              ></CSelect>
            </div>
          </div>

          <div style="width: 50%">
            <!-- <CButton
              @click="createNewFolder"
              color="info"
              title="点击文件夹即可，不需要打钩选中哦~"
              class="system-btn-style"
            >
              {{ saveAsName }}</CButton
            > -->
            <CButton
              @click="menuOk"
              color="info"
              style="width: 68px"
              class="system-btn-style"
              >确定</CButton
            >
            <CButton
              @click="cancel"
        
              color="info"
              class="cancel-btn"
              style="width: 68px"
              >取消</CButton
            >
            <!-- <CButton
              @click="showSelectedData"
              color="info"
              class="delBtn"
              style="width: 100px"
              >显示选择>></CButton
            > -->
          </div>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "editModalTree",
  props: {
    modalShow: {
      type: Boolean,
      default: false,
    },
    requestType: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    getColumn() {
      return [
        {
          key: "name",
          title: "名称",
          align: "center",
          width: "auto",
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  style: {
                    display: "inline-block",
                    width: "100%",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  },
                  domProps: {
                    title: params.row.path,
                  },
                  props: {
                    color: "info",
                    variant: "outline",
                  },
                },
                params.row.name
              ),
              
            ]);
          },
        },
        {
          title: "操作",
          width: "80px",
          slot: "action",
          align: "center",
        },
        
      ];
    },
  },
  data() {
    return {
      resultDataTotal: 0,
      ztreeId: "ztree_" + parseInt(Math.random() * 1e10),
      editModal: false,
      split1: 0.5,
      filterName: "",
      setting: {
        check: {
          enable: true,
          nocheckInherit: false,
          chkboxType: { Y: "p", N: "s" },
        },
        data: {
          simpleData: {
            enable: true,
          },
        },
        callback: {
          // beforeClick: this.beforeClick,
          // onClick: this.zTreeOnClick,
          // onCheck: this.zTreeOnCheck,
          onClick: this.zTreeOnClick,
          onCheck: this.zTreeOnCheck,
          onExpand: this.zTreeOnClick,
        },
      },
      zNodes: [],
    };
  },
  methods: {
    zTreeOnClick(event,treeId,treeNode){
      let treeobj = $.fn.zTree.getZtreeObj(treeId),
      nodes =treeObj.getCheckedNodes(true);
    },
    cancel() {
      this.$emit("closed");
      // this.reset();
    },
    ztreeSetting() {

      let that = this;
      let urlPath = this.$api.processingApi.getDir + this.requestType;
      let param = {
        userName: window.sessionStorage.getItem("user"),
      };
      this.http.get(urlPath, param).then((res) => {
        let data = res.data;
        if (data.success == true) {
          // let treenNodeData = this.getShowFileNodeData(data.data);
          this.ztreeObjInstance = $.fn.zTree.init(
            $("#" + that.ztreeId),
            that.setting,
            data.data
          );
          let nodes = this.ztreeObjInstance.getNodes();

          // this.ztreeObjInstance.expandNode(nodes[0], true, false, false);
          this.ztreeObjInstance.expandNode(nodes[1], true, false, false);
          this.ztreeObjInstance.selectNode(nodes[1], false);
          // this.updateTreeNodeBySuffix(this.ztreeObjInstance, nodes[1]);
        }
      });
    },
  },
  watch: {
    modalShow: {
      handler(val) {

        this.editModal = val;
        if (!val) {
          this.filterName = ""; //关闭弹框搜索名字清空
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // this.ztreeSetting();
    // $.fn.zTree.init($("#ztreeId"), this.setting, this.zNodes).expandAll(true);
  },
};
</script>

<style scoped>
.demo-split {
  height: 500px;
  
  overflow-y: auto;
}
.demo-split-pane {
  height: 500px;
  flex: 1;
  overflow-y: auto;
}
.demo-split-pane-right {
  margin-left: 10px;
  height: 500px;
  flex: 1;
  overflow-y: auto;
}


</style>